import Link from "next/link";
import { Collapse } from 'antd-mobile'

export default (props) => {
  const componentsInfo = [
    {
      label: '通用',
      components: ['Button', 'Icon'],
      sort: 0,
    },
    {
      label: '布局',
      components: ['AutoCenter', 'Divider', 'Grid', 'SafeArea', 'Space'],
      sort: 1,
    },
    {
      label: '导航',
      components: ['CapsuleTabs', 'IndexBar', 'JumboTabs', 'NavBar', 'SideBar', 'TabBar', 'Tabs'],
      sort: 2,
    },
    {
      label: '信息展示',
      components: ['Avatar', 'Card', 'Collapse', 'Ellipsis', 'FloatingPanel', 'Image', 'ImageViewer', 'InfiniteScroll', 'List', 'PageIndicator', 'Steps', 'Swiper', 'Tag', 'WaterMark', 'Footer'],
      sort: 3,
    },
    {
      label: '信息录入',
      components: ['Cascader', 'CascaderView', 'CheckList', 'Checkbox', 'Form', 'Input', 'Picker', 'PickerView', 'Radio', 'Rate', 'SearchBar', 'Selector', 'Slider', 'Stepper', 'Switch', 'TextArea'],
      sort: 4,
    },
    {
      label: '反馈',
      components: ['ActionSheet', 'Dialog', 'Empty', 'ErrorBlock', 'Loading', 'Mask', 'Modal', 'Popover', 'Popup', 'ProgressBar', 'ProgressCircle', 'PullToRefresh', 'Result', 'Skeleton', 'SwipeAction', 'Toast'],
      sort: 5,
    },
    {
      label: '引导提示',
      components: ['Badge', 'NoticeBar'],
      sort: 6,
    },
    {
      label: '其他',
      components: ['ConfigProvider'],
      sort: 7,
    },
    {
      label: '试验性',
      components: ['CalendarPicker', 'CalendarPickerView', 'Dropdown', 'FloatingBubble', 'ImageUploader', 'NumberKeyboard', 'PasscodeInput', 'ResultPage', 'TreeSelect', 'VirtualInput'],
      sort: 8,
    },
  ]

  return <div className="fixed right-0 top-0 h-full w-full overflow-scroll bg-white z-[100]" style={props.style}>
    <Collapse>
      {
        componentsInfo.map((item, index) => <Collapse.Panel key={index} title={item.label}>
          {
            item.components.map((name, index) => <div key={index} onClick={() => props.onClick()}>
              <Link className='text-[24px]' href={`/antdmobile/${name}`}>{name}</Link>
            </div>)
          }
        </Collapse.Panel>)
      }
    </Collapse>
  </div>
}